<template>
    <div>

        <van-cell center title="切换登录方式">
            <template #right-icon>
                <van-switch v-model="isShowUP" size="24"/>
            </template>
        </van-cell>

        <div v-if="isShowUP">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder=""
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder=""
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-checkbox style="float: left;margin-left: 16px;" v-model="rememberMe" shape="square">记住密码
                    </van-checkbox>
                    <div style="float: right;margin-right: 16px;"><a @click="register" style="color: blue">注册</a></div>
                </div>
                <div style="margin-top:50px;margin-left: 16px;margin-right: 16px;">
                    <van-button round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>

        <div v-if="!isShowUP">
            <van-form @submit="onSubmit">
                <van-field name="face" label="头像" :rules="[{ required: true, message: '请上传头像' }]">
                    <template #input>
                        <van-uploader :after-read="afterRead"
                                      v-model="face" multiple :max-count="1"
                                      :max-size="20 * 1024 * 1024"
                                      @oversize="onOversize"
                                      class="uploader">
                        </van-uploader>
                    </template>
                </van-field>
                <div style="margin-top:50px;margin-left: 16px;margin-right: 16px;">
                    <van-button round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>

        <van-action-sheet v-model="showSheet" title="注册" cancel-text="取消"
                          close-on-click-action
                          @cancel="onCancel">
            <div class="content">
                <van-form @submit="onRegister">
                    <van-field
                            v-model="form.username"
                            name="username"
                            label="用户名"
                            placeholder=""
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                            v-model="form.password"
                            type="password"
                            name="password"
                            label="密码"
                            placeholder=""
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                            v-model="form.rePassword"
                            type="password"
                            name="rePassword"
                            label="重复密码"
                            placeholder=""
                            :rules="[{ required: true, message: '请填写重复密码' }]"
                    />
                    <van-field name="face" label="头像"
                               :rules="[{ required: true, message: '请上传头像' }]">
                        <template #input>
                            <van-uploader :after-read="afterRead"
                                          v-model="form.face" multiple :max-count="1"
                                          :max-size="20 * 1024 * 1024"
                                          @oversize="onOversize"
                                          class="uploader">
                            </van-uploader>
                        </template>
                    </van-field>
                    <div style="margin-top:50px;margin-left: 16px;margin-right: 16px;">
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>
            </div>
        </van-action-sheet>

    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                isShowUP: true,
                username: '',
                password: '',
                rememberMe: false,
                face: [],
                showSheet: false,
                form: {
                    username: '',
                    password: '',
                    rePassword: '',
                    face: []
                }
            };
        },
        methods: {
            onRegister(values) {
                if(values.password != values.rePassword){
                    this.$notify({
                        type: 'warning',
                        message: '密码与重复密码不一致',
                        duration: 2000
                    });
                    this.form.password = ''
                    this.form.rePassword = ''
                    return;
                }
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                let f = new FormData()
                f.append('username',values.username)
                f.append('password',values.password)
                f.append('face',values.face[0].file)
                this.$http.post("/user/add",f,{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
                    if(res.data.status == 'success'){
                        this.$notify({
                            type: 'success',
                            message: '添加成功'
                        });
                    }else{
                        this.$notify({
                            type: 'warning',
                            message: '添加失败'
                        });
                    }
                }).finally(()=>{
                    this.$toast.clear();
                    this.showSheet = false
                })
            }, onSubmit(values) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                let f = new FormData()
                if(this.isShowUP){
                    f.append('type',1)
                    f.append('username',values.username)
                    f.append('password',values.password)
                }else{
                    f.append('type',2)
                    f.append('face',values.face[0].file)
                }
                this.$http.post("/user/login",f,{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
                    if(res.data.status == 'success'){
                        this.$notify({
                            type: 'success',
                            message: '登录成功'+res.data.data
                        });
                    }else{
                        this.$notify({
                            type: 'warning',
                            message: '登录失败'
                        });
                    }
                }).finally(()=>{
                    this.$toast.clear();
                })
            }, register() {
                this.showSheet = true;
            }, onOversize() {
                this.$notify({
                    type: 'warning',
                    message: '文件太大，请您重新选则',
                    duration: 2000
                });
            }, afterRead() {
            }, onCancel() {
                this.showSheet = false;
            }
        },
    }
</script>

<style scoped>
    .content {
        padding: 16px 16px 160px;
    }
</style>
